<template name="banner">
  <div>
    <el-carousel trigger="click" height="405px" indicator-position="none" class="bannerGroup">
      <el-carousel-item v-for="item in goJourneyBannerList" :key="item.id">
        <a href="JavaScript:;" class="group">
          <img :src="item.img" alt="广告" />
          <span class="title">{{item.title}}</span>
        </a>
      </el-carousel-item>
    </el-carousel>
    <ul class="securityGroup">
      <li>
        <i class="icon"></i>
        <span style="font-size: 14px">
          <span style="display: inherit">透明低价</span>
          <span style="color: #666;">超值低价、每日更新</span>
        </span>
      </li>
      <li>
        <i class="icon icon2"></i>
        <span style="font-size: 14px">
          <span style="display: inherit">海量路线</span>
          <span style="color: #666;">全球线路、自由选择</span>
        </span>
      </li>
      <li>
        <i class="icon icon3"></i>
        <span style="font-size: 14px">
          <span style="display: inherit">客服保障</span>
          <span style="color: #666;">专业客服、实时在线</span>
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "banner",
  data() {
    return {
      goJourneyBannerList: []
    };
  },
  methods: {
    getData() {
      let getGoJourneyBannerData = [
        {
          id: 0,
          img:
            "http://p1-q.mafengwo.net/s13/M00/B5/04/wKgEaVzj2veAPGeeAAC__vr9NLg98.jpeg?imageMogr2%2Fthumbnail%2F%21730x405r%2Fgravity%2FCenter%2Fcrop%2F%21730x405%2Fquality%2F100",
          title: "金卡96折"
        }
      ];
      this.goJourneyBannerList = getGoJourneyBannerData;
    }
  },
  mounted() {
    this.getData();
  }
};
</script>

<style lang="stylus" scoped>
.bannerGroup {
  width: 720px;

  /deep/ .el-carousel__arrow {
    width: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: inherit;
    height: 90px;
    font-size: 25px;
  }

  /deep/ .el-carousel__arrow--right {
    right: 0;
  }

  /deep/ .el-carousel__arrow--left {
    left: 0;
  }

  .group {
    position: relative;

    .title {
      position: absolute;
      bottom: 0;
      width: 140px;
      line-height: 30px;
      color: #fff;
      left: 39.5%;
      background-color: rgba(0, 0, 0, 0.7);
      bottom: 15px;
      text-align: center;
      /* color: black; */
      font-size: 13px;
    }
  }
}

.securityGroup {
  display: flex;
  justify-content: space-evenly;
  margin-top: 20px;

  li {
    width: 180px;
    height: 40px;
    display: flex;

    .icon {
      width: 36px;
      height: 41px;
      background-image: url('http://css.mafengwo.net/images/sales/global-icon4.png');
      display: inline-block;
      background-position: 70px 2px;
      margin-right: 10px;
    }

    .icon2 {
      background-position: 70px -38px;
    }

    .icon3 {
      background-position: 70px -77px;
    }
  }
}
</style>